import { Form, InputNumber, Modal, Input,  Radio } from "antd";
import React from "react";


class UserUpdateModal extends React.Component{
    constructor(props){
        super(props);
        this.state={
            updateVisible:false
        }
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log('从表单获得的信息为: ', values);
            this.props.onUpdateSubmit(values);
          }
        });
      };

    render(){
        const { getFieldDecorator } = this.props.form;
        const { userItem ,updateVisible, onUpdateCancel}=this.props;
        const formItemFormat = {
            labelCol:{span:4},
            wrapperCol:{span:18},
        };

        return(
            <div>
                <Modal
                title={"修改用户"}
                visible={updateVisible}
                onCancel={onUpdateCancel}
                onOk={this.handleSubmit.bind(this)}
                okText="修改"
                cancelText="取消"
                >
                    <Form>
                        {getFieldDecorator(`id`, {initialValue: userItem.id || "",})(<Input type="hidden" />)}
                        <Form.Item  label="姓名" {...formItemFormat}>
                            {
                                getFieldDecorator(`name`,{
                                  initialValue: userItem.name || "",
                                    rules:[
                                        {required: true, message: '请在此输入用户姓名'},
                                        {max: 10, message: '姓名不能超过10个字符'},
                                    ]
                                })
                                  // eslint-disable-next-line
                                (
                                    <Input placeholder="请输入姓名" />
                                )
                            }
                        </Form.Item>
                        <Form.Item label="年龄" {...formItemFormat}>
                            {
                                getFieldDecorator(`age`,{
                                    initialValue: userItem.age || "",
                                    rules:[
                                        {required: true, message: '请在此输入用户年龄'},
                                    ]
                                })
                                  // eslint-disable-next-line
                                (
                                    <InputNumber placeholder="请输如年龄" min={1} max={150}/>
                                )
                            }
                        </Form.Item>
                        <Form.Item label="性别" {...formItemFormat}>
                            {
                                getFieldDecorator(`sex`,{
                                    initialValue: userItem.sex || "",
                                    rules:[
                                        {required: true, message: '请在此输入用户年龄'},
                                        {max: 150,min:1, message: '年龄范围必须在1~150'},
                                    ]
                                })
                                  // eslint-disable-next-line
                                (
                                    <Radio.Group>
                                      <Radio value={'男'}>男</Radio>
                                      <Radio value={'女'}>女</Radio>
                                    </Radio.Group>
                                )
                            }
                        </Form.Item>
                        <Form.Item label="地址" {...formItemFormat}>
                            {
                                getFieldDecorator(`address`,{
                                    initialValue: userItem.address || "",
                                    rules:[
                                        {required: true, message: '请在此输入用户地址'},
                                        {max: 10, message: '地址不能超过255个字符'},
                                    ]
                                })
                                  // eslint-disable-next-line
                                (
                                    <Input.TextArea rows={3} placeholder="请输入地址" />
                                )
                            }
                        </Form.Item>
                    </Form>
                </Modal>
            </div>

        )
    }
}

export default Form.create()(UserUpdateModal);
